<template>
  <div>
    <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
      <div class="infoModal">标准视频</div>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
        class="formVideoModel"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="country" label="区县" prop="country" v-if="showCountry">
              <CountySelect :form.sync="form" @update="validateField"></CountySelect>
            </a-form-model-item>
            <a-form-model-item label="区县" v-if="!showCountry">
              <a-select v-model="form.country" :disabled="true"></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="projectName" label="项目名称" prop="projectName">
              <a-input
                v-model="form.projectName"
                @blur="
                  () => {
                    $refs.projectName.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="资管编号">
              <a-input
                v-model="form.number"
                @blur="
                  () => {
                    $refs.number.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="customer" label="客户名称" prop="customer">
              <a-input
                v-model="form.customer"
                @blur="
                  () => {
                    $refs.customer.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="客户地址" ref="customerArea" prop="customerArea" placeholder="">
              <a-input
                v-model="form.customerArea"
                @blur="
                  () => {
                    $refs.customerArea.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="customerName" label="客户姓名" prop="customerName">
              <a-input
                v-model="form.customerName"
                @blur="
                  () => {
                    $refs.customerName.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="customerMobile" label="联系方式" prop="customerMobile">
              <a-input
                v-model="form.customerMobile"
                @blur="
                  () => {
                    $refs.customerMobile.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="sceneUse" label="业务情况" prop="sceneUse">
              <a-select v-model="form.sceneUse" placeholder="请选择业务情况">
                <a-select-option value="在用">在用</a-select-option>
                <a-select-option value="停用">停用</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="sceneType" label="场景类型" prop="sceneType">
              <a-select v-model="form.sceneType" placeholder="请选择场景类型">
                <a-select-option value="室内">室内</a-select-option>
                <a-select-option value="室外道路">室外道路</a-select-option>
                <a-select-option value="室外非道路">室外非道路</a-select-option>
                <a-select-option value="一键报警">一键报警</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="camera" label="探头数量" prop="camera">
              <a-input
                v-model="form.camera"
                @blur="
                  () => {
                    $refs.camera.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item :autoLink="false" ref="accessType" label="接入类型" prop="accessType">
              <a-select v-model="form.accessType" placeholder="请选择接入类型" @change="accessTypeOnchange">
                <a-select-option value="公网">公网</a-select-option>
                <a-select-option value="私网">私网</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="lineIp" label="专线IP" prop="lineIp" v-show="accessTypeShow">
              <a-input
                v-model="form.lineIp"
                @blur="
                  () => {
                    $refs.lineIp.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
            <a-form-model-item :autoLink="false" label="专线IP" v-show="!accessTypeShow">
              <a-input v-model="form.lineIp" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item ref="route" label="跳纤路由" prop="route">
              <a-input
                v-model="form.route"
                @blur="
                  () => {
                    $refs.route.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item ref="lightCross" label="接入光交名称" prop="lightCross">
              <a-input
                v-model="form.lightCross"
                @blur="
                  () => {
                    $refs.lightCross.onFieldBlur()
                  }
                "
              />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="维护等级" ref="level" prop="level" placeholder="">
              <a-select v-model="form.level" placeholder="请选择维护等级">
                <a-select-option value="普通">普通</a-select-option>
                <a-select-option value="A">A</a-select-option>
                <a-select-option value="AA">AA</a-select-option>
                <a-select-option value="AAA">AAA</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item :autoLink="false" ref="storeType" label="存储方式" prop="storeType">
              <a-select v-model="form.storeType" placeholder="请选择存储方式" @change="storeTypeOnchange">
                <a-select-option value="本地">本地</a-select-option>
                <a-select-option value="平台">平台</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row v-show="storeTypeShow">
          <a-col :span="24">
            <div class="infoModal">存储设备</div>
          </a-col>
          <a-button @click="addSheBei" style="margin: 0px 0 10px 20px" type="primary">添加设备</a-button>
          <a-table
            :pagination="false"
            style="margin:0 20px 0 20px"
            :loading="tableLoading"
            :columns="storageColumns"
            :data-source="storageData"
            bordered
            size="middle"
          >
            <template slot="action" slot-scope="text, record">
              <a v-if="record.key > 1" @click="deleteShebei(record.key)">移除</a>
            </template>

            <template slot="storeBrand" slot-scope="text, record">
              <a-input v-model="record.storeBrand" />
            </template>

            <template slot="storeModel" slot-scope="text, record">
              <a-input v-model="record.storeModel" />
            </template>
          </a-table>
        </a-row>

        <a-row>
          <a-col :span="24">
            <div class="infoModal">探头设备</div>
          </a-col>
          <a-button @click="addTantou" style="margin: 0px 0 10px 20px" type="primary">添加探头</a-button>
          <a-table
            :pagination="false"
            style="margin:0 20px 0 20px"
            :loading="tableLoading"
            :columns="probeColumns"
            :data-source="probeData"
            bordered
            size="middle"
          >
            <template slot="action" slot-scope="text, record">
              <a v-if="record.key > 1" @click="deleteTantou(record.key)">移除</a>
            </template>

            <template slot="probeBrand" slot-scope="text, record">
              <a-input v-model="record.probeBrand" />
            </template>

            <template slot="probeLocation" slot-scope="text, record">
              <a-input v-model="record.probeLocation" />
            </template>
            <template slot="probeModel" slot-scope="text, record">
              <a-input v-model="record.probeModel" />
            </template>

            <template slot="probeType" slot-scope="text, record">
              <a-select v-model="record.probeType" placeholder="请选择设备类型">
                <a-select-option value="枪机">枪机</a-select-option>
                <a-select-option value="球机">球机</a-select-option>
                <a-select-option value="半球">半球</a-select-option>
                <a-select-option value="一键报警">一键报警</a-select-option>
              </a-select>
            </template>
            <template slot="light" slot-scope="text, record">
              <a-select v-model="record.light" placeholder="请选择取电信息">
                <a-select-option value="市电">市电</a-select-option>
                <a-select-option value="客户自备">客户自备</a-select-option>
                <a-select-option value="三方">三方</a-select-option>
                <a-select-option value="一键报警">一键报警</a-select-option>
              </a-select>
            </template>
          </a-table>
        </a-row>

        <a-form-model-item :wrapper-col="{ span: 10, offset: 10 }">
          <a-button type="primary" @click="onSubmit">
            提交
          </a-button>
          <a-button style="margin-left: 10px;" @click="onCancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { modifyManageVideo, getVideoById } from '@/api/video'
import CountySelect from '@/views/videoManage/util/countySelect'
import { ACCESS_TOKEN, ROLE_NAME, USERINFO } from '@/store/mutation-types'
export default {
  props: ['id'],
  components: { CountySelect },
  data() {
    return {
      showCountry: true,
      storeTypeShow: false,
      accessTypeShow: false,
      fromValue: '',
      lodaing: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      dataSource: [],
      tableLoading: false,
      storageData: [],
      storageColumns,
      probeData: [],
      probeColumns,
      form: { country: '' },
      rules: {
        accessType: [{ required: true, message: '请选择接入方式', trigger: 'change' }],
        camera: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        country: [{ required: true, message: '请选择区县', trigger: 'change' }],
        camera: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        customer: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        customerArea: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        customerMobile: [
          { required: true, message: '请输入电话', whitespace: true },
          { validator: this.phoneCheck.bind(this) }
        ],
        customerName: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        level: [{ required: true, message: '请选择维护等级', trigger: 'change' }],
        light: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        lightCross: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        route: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        sceneType: [{ required: true, message: '请选择场景类型', trigger: 'change' }],
        sceneUse: [{ required: true, message: '请选择业务情况', trigger: 'change' }],
        lineIp: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        storeType: [{ required: true, message: '请选择存储方式', trigger: 'change' }],
        number: [{ required: true, message: '请填写完整', trigger: 'blur' }],
        projectName: [{ required: true, message: '请填写完整', trigger: 'blur' }]
      }
    }
  },
  created() {
    if (Vue.ls.get(ROLE_NAME) == '区县公司') {
      this.form.country = Vue.ls.get(USERINFO).belong
      this.showCountry = false
    } else if (Vue.ls.get(ROLE_NAME) == '市公司') {
    } else if (Vue.ls.get(ROLE_NAME) == '代维单位') {
      this.form.country = Vue.ls.get(USERINFO).belong
      this.form.memberId = Vue.ls.get(USERINFO).id
      this.showCountry = false
    } else if (Vue.ls.get(ROLE_NAME) == '管理员') {
    }
    this.getVideoByIdFunction()
  },
  mounted() {},
  methods: {
    //存储设备选择  form表单劫持change事件 要关闭item 手动验证
    storeTypeOnchange(e) {
      e == '本地' ? (this.storeTypeShow = true) : (this.storeTypeShow = false)
      this.$refs.ruleForm.validateField('storeType')
    },
    //公网私网选择
    accessTypeOnchange(e) {
      e == '公网'
        ? ((this.accessTypeShow = true), (this.rules.lineIp[0].required = true))
        : ((this.accessTypeShow = false), (this.rules.lineIp[0].required = false))
      this.$refs.ruleForm.validateField('accessType')
    },
    //默认添加一行数组
    getVideoByIdFunction() {
      getVideoById(this.id).then(response => {
        this.form = response.data
        this.form.storeType == '本地' ? (this.storeTypeShow = true) : (this.storeTypeShow = false)
        this.form.accessType == '公网'
          ? ((this.accessTypeShow = true), (this.rules.lineIp[0].required = true))
          : ((this.accessTypeShow = false), (this.rules.lineIp[0].required = false))
        let storageInfo = {}
        storageInfo.storeBrand = response.data.storeBrand
        storageInfo.storeModel = response.data.storeModel
        storageInfo.key = 1
        this.storageData.push(storageInfo)
        let probeInfo = {}
        probeInfo.probeBrand = response.data.probeBrand
        probeInfo.probeLocation = response.data.probeLocation
        probeInfo.light = response.data.light
        probeInfo.probeType = response.data.probeType
        probeInfo.probeModel = response.data.probeModel
        probeInfo.key = 1
        this.probeData.push(probeInfo)
        if (response.data.storeSku != null) {
          let info = JSON.parse(response.data.storeSku)
          if (info.storageData != undefined) {
            if (info.storageData.length > 0) {
              this.storageData = this.storageData.concat(info.storageData)
            }
          }
          if (info.probeData != undefined) {
            if (info.probeData.length > 0) {
              this.probeData = this.probeData.concat(info.probeData)
            }
          }
        }
      })
    },
    //添加设备
    addSheBei() {
      var timestamp = new Date().getTime()
      let storageInfo = {}
      storageInfo.storeBrand = ''
      storageInfo.storeModel = ''
      storageInfo.key = timestamp
      this.storageData.push(storageInfo)
    },
    //添加探头
    addTantou() {
      let timestamp = new Date().getTime()
      let probeInfo = {}
      probeInfo.key = timestamp
      this.probeData.push(probeInfo)
    },
    //手动再验证
    validateField(e) {
      this.form.country = e
      this.$refs.ruleForm.validateField('country')
    },
    // 表单提交
    onSubmit(e) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let storageData = this.storageData
          let storageInfoData = []
          let timestamp = Date.parse(new Date())
          for (let i = 0; i < storageData.length; i++) {
            if (i > 0) {
              let storageInfo = {}
              storageInfo.storeBrand = storageData[i].storeBrand
              storageInfo.storeModel = storageData[i].storeModel
              storageInfo.key = timestamp
              storageInfoData.push(storageInfo)
            } else {
              this.form.storeBrand = storageData[i].storeBrand
              this.form.storeModel = storageData[i].storeModel
            }
          }

          let probeData = this.probeData
          let probeInfoData = []
          for (let i = 0; i < probeData.length; i++) {
            if (i > 0) {
              let storageInfo = {}
              storageInfo.probeBrand = probeData[i].probeBrand
              storageInfo.probeLocation = probeData[i].probeLocation
              storageInfo.probeModel = probeData[i].probeModel
              storageInfo.probeType = probeData[i].probeType
              storageInfo.light = probeData[i].light
              storageInfo.key = timestamp
              probeInfoData.push(storageInfo)
            } else {
              this.form.probeBrand = probeData[i].probeBrand
              this.form.probeLocation = probeData[i].probeLocation
              this.form.probeModel = probeData[i].probeModel
              this.form.probeType = probeData[i].probeType
              this.form.light = probeData[i].light
            }
          }

          let skuInfo = {}
          skuInfo.storageData = storageInfoData
          skuInfo.probeData = probeInfoData
          this.form.storeSku = JSON.stringify(skuInfo)
          modifyManageVideo(this.form).then(response => {
            if (response != undefined) {
              if (response.code == 200) {
                let type = 'success'
                this.$notification[type]({
                  message: '温馨提示',
                  description: '编辑成功!',
                  duration: 3
                })
                this.$emit('successEvent')
              }
            }
          })
        } else {
          return false
        }
      })
    },
    //删除设备
    deleteShebei(e) {
      this.storageData.splice(
        this.storageData.findIndex(item => item.key === e),
        1
      )
    },
    //删除探头
    deleteTantou(e) {
      this.probeData.splice(
        this.probeData.findIndex(item => item.key === e),
        1
      )
    },

    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
    handleChange(e) {
      this.form.roleName = e
    },
    onCancel() {
      this.$emit('cancelEvent')
    },
    handleTableChange() {},
    addMember() {},
    cancelEvent() {
      this.$emit('cancelEvent')
    }
  }
}
const storageColumns = [
  {
    title: '设备厂家',
    dataIndex: 'storeBrand',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'storeBrand' }
  },
  {
    title: '设备型号',
    dataIndex: 'storeModel',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'storeModel' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

const probeColumns = [
  {
    title: '设备厂家',
    dataIndex: 'probeBrand',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'probeBrand' }
  },
  {
    title: '设备型号',
    dataIndex: 'probeModel',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'probeModel' }
  },
  {
    title: '设备类型',
    dataIndex: 'probeType',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'probeType' }
  },
  {
    title: '取电信息',
    dataIndex: 'light',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'light' }
  },
  {
    title: '探头安装位置',
    dataIndex: 'probeLocation',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'probeLocation' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
</script>

<style lang="less">
.infoModal {
  height: 51px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
